<template>
  <div>
    <router-link tag='div' class="header-abs" to="/" v-show="showAbs"> 
      <div class='iconfont header-abs-icon'>&#xeb99;</div>
    </router-link>
    <div class="header-fixed" v-show="!showAbs" :style='opacityStyle'>
      <router-link to="/">
        <span class='iconfont header-fixed-back'>
              &#xeb99;
        </span>
      </router-link>
      景点详情
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data() { 
    return {
      showAbs:true,
      opacityStyle:{
        opacity:0
      }
    }
  },
  methods: {
    handleScroll(){
      // pc:document.documentElement.scrollTop     移动端 :
      // console.log(document.documentElement.scrollTop );
      // console.log(document.body.scrollTop);
      console.log('scroll1111');
      const top=document.documentElement.scrollTop ||document.body.scrollTop
      if (top > 60) {
        let opacity=top/140
        opacity=opacity>1 ? 1 : opacity
        this.opacityStyle={opacity}
        this.showAbs=false
      } else {
        this.showAbs=true;
      }
    }
  },
  mounted() {

  },
  activated() {
    window.addEventListener('scroll',this.handleScroll)
    console.log('activated');
  },
  // 对全局事件解绑 页面即将替换为新的页面的时候
  deactivated () {
    window.removeEventListener('scroll',this.handleScroll)
  }
 }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
  .header-abs
    position:absolute;
    left:0.2rem;
    top:0.1rem;
    width:0.4rem;
    height:0.4rem
    line-height:0.4rem;
    border-radius:0.4rem;
    text-align:center;
    background:rgba(0,0,0,0.8)
    .header-abs-icon
      color:#ffffff;
  .header-fixed
    z-index:2;
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:$headerHeight;
    line-height:$headerHeight;
    text-align:center;
    color:#fff;
    background:$bgColor;
    font-size:0.2rem;
    .header-fixed-back
      position:absolute;
      top:0;
      left:0;
      width:0.64rem;
      text-align:center;
      font-size:0.2rem;
      color:#fff;
</style>